<template>
  <div class="navigation">
    <div
        v-for="(category, index) in categories"
        :key="index"
        class="category-item"
    >
      <!--<router-link :to="{ path: '/ListPage', query: { category: category.name } }" class="category-name"> 何来路由 分类-->
      <span class="category-name">{{ category.name }}</span>
      <span class="separator">|</span>
      <ul class="sub-categories">
        <li v-for="(subCategory, subIndex) in category.subCategories" :key="subIndex">
          <router-link :to="{ path: '/ListPage', query: { category: category.name, subCategory: subCategory.name } }">
            {{ subCategory.name }}
          </router-link>
          <span v-if="subIndex !== category.subCategories.length - 1">/</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "navigation",
  data() {
    return {
      categories: [
        {
          name: '电子产品',
          subCategories: [
            {name: '手机'},
            {name: '电脑'},
            {name: '数码'}
          ]
        },
        {
          name: '服饰鞋帽',
          subCategories: [
            {name: '男装'},
            {name: '女装'},
            {name: '童装'}
          ]
        },
        {
          name: '家电厨具',
          subCategories: [
            {name: '空调'},
            {name: '冰箱'},
            {name: '油烟机'}
          ]
        },
        {
          name: '个人洁护',
          subCategories: [
            {name: '美妆'},
            {name: '洗漱'},
            {name: '纸巾'}
          ]
        },
        {
          name: '绿色出行',
          subCategories: [
            {name: '电动车'},
            {name: '新能源'},
            {name: '配件'}
          ]
        }
      ]
    };
  }
}
</script>

<style scoped>
.navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 303px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
}

.category-name {
  font-size: 14px;
  margin-right: 10px;
}

.separator {
  margin: 0 10px;
}

.sub-categories {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  margin-left: 20px;

}

.sub-categories li {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.sub-categories li a {
  text-decoration: none;
  color: black;
  font-size: 15px;
}

.sub-categories li a:hover {
  text-decoration: underline;
}
a{
  text-decoration: none;
  color: black;

}
</style>